<template>
  <!--  视频列表开始  -->
  <div style="width: 1200px;margin: 0 auto">
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in contentArr" style="margin: 10px 0">
        <el-card>
          <a href="javascript:void(0)" @click="detail(item.id)">
            <img :src="BASE_URL+item.imgUrl" width="100%" height="145">
            <p style="height: 40px">{{ item.title }}</p>
          </a>
          <el-row>
            <el-col :span="4">
              <el-avatar :src="BASE_URL+item.userImgUrl" size="small"></el-avatar>
            </el-col>
            <el-col :span="10">{{ item.nickname }}</el-col>
            <el-col :span="10">
              <span style="float: right">{{ item.categoryName }}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <!--  视频列表结束  -->
</template>

<script>
export default {
  name: "ListView",
  data() {
    return {
      contentArr: []
    }
  },
  methods: {
    detail(id) {
      this.$router.push('/detail?id=' + id);
    },
    loadContents() {
      if (location.search.includes('type')){// /list?type=1/5/8
        //得到跳转过来时传递的type(1,5,8)
        let type = new URLSearchParams(location.search).get('type');
        this.axios.get(this.BASE_URL + '/v1/contents/' + type + "/list")
            .then((response) => {
              if (response.data.code == 1) {
                this.contentArr = response.data.data;
              }
            })
      }else{//搜索  /list?wd=xxxx
        let wd = new URLSearchParams(location.search).get('wd');
        this.axios.get(this.BASE_URL+'/v1/contents/'+wd+'/search')
        .then((response)=>{
          if (response.data.code==1){
            this.contentArr = response.data.data;
          }
        })
      }

    }
  },
  mounted() {
    //第一次进来时执行
    this.loadContents();
  },
  beforeRouteUpdate(to, from, next) {
    //此方法在路由跳转之前执行,如果不执行里面的next则拦截此次跳转
    next();//放行
    this.loadContents();
  }

}
</script>

<style scoped>

</style>